<template>
  <el-row type="flex" class="row-bg" :justify="justify">
    <el-col :span="colSize">
      <el-steps :active="active" simple>
        <el-step
          :title="item.title"
          :icon="'iconfont icon-' + (index + 1)"
          :key="index"
          v-for="(item, index) in stepData"
          @click.native="stepChange(index, item.router)"
        >
        </el-step>
        <!--        <el-step title="新建订单" @click.native="changeStep(2)"  icon="iconfont icon-2"></el-step>-->
        <!--        <el-step title="信息录入" @click.native="changeStep(3)" icon="iconfont icon-3"></el-step>-->
        <!--        <el-step title="订单保存" @click.native="changeStep(4)"  icon="iconfont icon-4"></el-step>-->
      </el-steps>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "StepNav",
  props: {
    // array
    stepData: {
      type: Array,
      default() {
        return [];
      },
    },
    //width col宽度
    colSize: {
      type: Number,
      default: 12,
    },
    //对齐方式
    justify: {
      type: String,
      default: "center",
    },
    // 可点击范围
    active: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
  comments: {},
  created() {},
  mounted() {},
  methods: {
    stepChange(index, router) {
      if (this.active >= index + 1 && router) {
        
        if (router == "/orderadd" || router == "/inforentryppm") {
          //项目保存页面数据换用用到query判断
          this.$router.push({
            path: router,
            query: {
              customerOrder: {},
            },
          });
        } else if (router == "/bgorderadd") {
          //变更保存页面用到
          this.$router.push({
            path: router,
            query: {
              flag: "1",
            },
          });
        }else if(router == "/custinfo" && sessionStorage.getItem('proFlag')){
           this.$router.push({
             path:router,
             query:{
               proFlag:sessionStorage.getItem('proFlag')
             }
           });
        } else {
          this.$router.push(router);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-steps--simple {
  background-color: #fff;
}
::v-deep .el-step.is-simple .el-step__icon {
  width: 0.3rem;
  height: 0.3rem;
}
::v-deep .el-step.is-simple .el-step__title {
  font-size: $fontSize_v1;
  font-weight: 400;
}
::v-deep .el-dialog__body {
  padding: 0 0.2rem 0.2rem 0.2rem !important;
}
::v-deep .el-step__title.is-process,
::v-deep .el-step__head.is-process,
::v-deep .el-step__title .is-wait {
  color: rgba(153, 153, 153, 0.5);
}
::v-deep .el-step.is-simple:not(:last-of-type) .el-step__title {
  max-width: inherit;
}
::v-deep .el-step__icon-inner.iconfont {
  font-size: 0.21rem;
}
::v-deep .el-step__head.is-wait {
  color: rgba(153, 153, 153, 0.5);
}
::v-deep .el-step.is-simple .el-step__head {
  padding-right: 0.04rem;
}
::v-deep .el-step.is-simple .el-step__arrow::before,
::v-deep .el-step.is-simple .el-step__arrow::after {
  content: "";
  display: inline-block;
  position: absolute;
  height: 0.01rem;
  width: 40%;
  background: rgba(153, 153, 153, 0.4);
  transform: none;
}
::v-deep .el-step.is-simple .el-step__arrow::before {
  display: none;
}
::v-deep .el-step.is-simple {
  cursor: pointer;
}
</style>
